import HighCharts from 'highcharts'

export function Pie(pieDiv, seriesName, seriesData) {
    HighCharts.chart(pieDiv, {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 35,
                beta: 0
            }
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        legend: {
            layout: 'vertical',
            align: "right",
            // verticalAlign: 'top',
            symbolHeight: 12,
            symbolWidth: 18,
            symbolRadius: 2,
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',
                style: {
					fontWeight: 'bold',
					color: '#333',
					fontSize: '12px'
				}
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                showInLegend: true,
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        if (this.percentage > 0)
                            return '<b>' + this.point.name + '</b>'
                    },
                },
            },
        },
        series: [{
            type: 'pie',
            name: seriesName,
            size: '60%',
            data: seriesData
        }]
    })
}

export function Histogram(histogramDiv, xAxisData, seriesData) {
    HighCharts.chart(histogramDiv, {
        chart: {
            type: 'column'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: xAxisData
        },
        yAxis: {
            min: 0,
            title: {
                text: '问题个数'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                }
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                '总量: ' + this.point.stackTotal;
            }
        },
        legend: {
            layout: 'vertical',
            align: "right",
            symbolHeight: 12,
            symbolWidth: 18,
            symbolRadius: 2,
            padding: -10,
            margin: 40,
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',
                style: {
					fontWeight: 'bold',
					color: '#333',
					fontSize: '12px'
                },
            }
        },
        credits: {
            enabled: false,
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                pointWidth: 30,
                dataLabels: {
                    enabled: false,
                    style: {
                        textOutline: '1px 1px black'
                    }
                }
            }
        },
        series: seriesData
    }) 
}